<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/easyui.css">
    <link rel="stylesheet" type="text/css" href="/icon.css">
    <link rel="stylesheet" type="text/css" href="/demo.css">
    <script src="/jquery.min.js"></script>
    <script src="/jquery.easyui.min.js"></script>
    <title>老师管理表</title>
</head>
<body>
<table id="dg"></table>
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newTeacher()">New</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editTeacher()">Edit </a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteTeacher()">Remove</a>
</div>
<!--form表单及弹出框加载-->
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
    <div style="color: skyblue">Teacher Information</div><hr />
    <form id="form">
        <table cellpadding="5">
            <tr>
                <td>tid:</td>
                <td><input class="easyui-textbox"  style="width: 100px;height:32px" type="number" name="tid" id="tno" ></td>
            </tr>
            <tr>
                <td>tname:</td>
                <td><input class="easyui-textbox"  style="width: 100px;height:32px" type="text" name="tname" id="sname" data-options="required:true"></td>
            </tr>
            <tr>
                <td>tsex:</td>
                <td><input  class="easyui-textbox"  style=" width:100%; height:32px" type="text" name="tsex"  data-options="required:true"></td>
            </tr>
        </table>
    </form>
    <div id="dlg-buttons">
        <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveTeacher()">Save</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
    </div>
</div>
<script type="text/javascript">
    var url = "";
    $("#dg").datagrid({
        url: "/TeacherController/teacherData",
        singleSelect: true,
        toolbar: "#toolbar",
        rownumbers: "true",
        fitColumns: "true",
        pagination: "true",
        pageSize: 10,
        columns: [[
            {field: 'tid', title: '教师编号', width: 100},
            {field: 'tname', title: '姓名', width: 100},
            {field: 'tsex', title: '性别', width: 50}
        ]]
    });
    //form 初始化
    $("#form").form({});
    //    弹窗初始化
    $("#dlg").dialog({});

    //    函数的实现
    function newTeacher() {
        $("#dlg").dialog('open').dialog('setTitle', 'new Teacher');
        $("#form").form('clear');
        $("#sid").textbox('readonly', false);
        url = "/TeacherController/saveTeacher";
    }
    function editTeacher() {
        var row = $('#dg').datagrid('getSelected');
        if (row) {
            console.log(row.sname);
            $('#dlg').dialog('open').dialog('setTitle', 'Edit Teacher');
            $("#sid").textbox('readonly', true);
            $('#form').form('load', {
                tid: row.tid,
                tname: row.tname,
                tsex: row.tsex
            });
            url = '/TeacherController/updataTeacher';
        }
    }

    function saveTeacher() {
        $("#form").form('submit', {
            url: url,
            success: function (result) {
                console.log( typeof result);
                console.log(result);
                $('#dlg').dialog('close');
                $('#dg').datagrid('reload');
            }
        });
    }

    function deleteTeacher() {
        var row = $("#dg").datagrid('getSelected');
        if (row) {
            $.messager.confirm('Confirm', '你确定要删除这个老师吗？', function (r) {
                if (r) {
                    $.post('/TeacherController/deleteTeacher', row, function (result) {
                        $('#dg').datagrid('reload');
                    });
                }
            });
        }
    }

    //    分页
    function pagerFilter(data) {
        if (typeof data.length == 'number' && typeof data.splice == 'function') {	// is array
            data = {
                total: data.length,
                rows: data
            }
        }
        var dg = $(this);
        var opts = dg.datagrid('options');
        var pager = dg.datagrid('getPager');
        pager.pagination({
            onSelectPage: function (pageNum, pageSize) {
                opts.pageNumber = pageNum;
                opts.pageSize = pageSize;
                pager.pagination('refresh', {
                    pageNumber: pageNum,
                    pageSize: pageSize
                });
                dg.datagrid('loadData', data);
            }
        });
        if (!data.originalRows) {
            data.originalRows = (data.rows);
        }
        var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
        var end = start + parseInt(opts.pageSize);
        data.rows = (data.originalRows.slice(start, end));
        return data;
    }
    $(function () {
        $('#dg').datagrid({loadFilter: pagerFilter});
    });

</script>



</body>
</html>